<!-- css精灵实现多图整合 -->

<!-- 作用：将好多小图整合到一个大图中，这样在实际网站向服务器请求图片时，就能只请求一次，减小服务器压力 -->

<!-- 方法 -->
<!-- 首先你有一张包含许多小图的大图，小图尺寸相等
开始：
放一个盒子，设置盒子大小为小图尺寸
然后找到要显示小图的坐标，就是以左上角为原点，找到小图左上角的坐标，即（-离左边距多远，-离上边距多远）
用  background-image 设置背景图为大图；用 background-position: 坐标，坐标；将小图坐标输入进去，
即可得出只显示小图的盒子 -->


<!-- 原理 -->

<!-- 就是将盒子缩小，使其大小只够显示小图，在通过调整位置，将小图的位置调整过来 -->

<!-- --- -->

<!-- 目标图片：H

小图大小：
580/5=116
650/5=130

116 * 130

坐标：
(-200,-130)
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css精灵</title>
    <style>
        div {
            width: 116px;
            height: 130px;
            background-color: slategray;
            background-image: url(../pictures/精灵背景图.png);
            background-position: -200px -130px;

        }


    </style>
</head>
<body>
    <div></div>
</body>
</html>

